<template>
  <div class="mail-list-page">
    <div class="mail-list-page-header">
      <h2 class="about">关于我们</h2>
    </div>
    <div class="mail-list-page-body">
      <p class="description">
        康康邮箱始终致力于为用户提供优质的服务和体验，始终秉持着创新、高效、可靠的理念，不断努力满足用户的需求。
      </p>
      <div class="team-intro">
        <h3 class="team-title">方针</h3>
        <p class="team-desc">
          时刻铭记质量是康康邮箱生存的基石，是客户选择的理由。
          将客户要求与期望准确传递到整个项目中，共同构建质量；
          尊重规则流程，一次把事情做对；我们发挥全球员工潜能，持续改进；
          与客户一起平衡机会与风险，快速响应客户需求，实现可持续发展。
          承诺向客户提供高质量的产品、服务和解决方案，持续不断让客户体验到我们致力于为每个客户创造价值。
        </p>
      </div>
      <div class="team-intro">
        <h3 class="team-title">承诺</h3>
        <p class="team-desc">
          即便开发者只有一个人，但
          我承诺打造一个具有数字包容、安全可信、绿色环保、和谐生态的邮箱，
          为每一位用户创造价值，为每一位员工创造快乐。
          并且将始终贯彻以客户为中心，以客户需求为优先，以客户需求为驱动，
          以客户需求为目标，以客户需求为追求的信条。
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {},
});
</script>

<style scoped>
.mail-list-page {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f5f7fa; /* 设置页面背景颜色 */
}

.mail-list-page-header {
  width: 100%;
  height: 80px;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff; /* 顶部栏白色背景 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 添加阴影效果 */
}

.about {
  font-weight: bold;
  text-align: center;
  font-size: 24px; /* 增大标题字体大小 */
  color: #333; /* 标题颜色 */
}

.mail-list-page-body {
  flex-grow: 1;
  padding: 20px; /* 添加内边距 */
}

.description {
  font-size: 16px;
  line-height: 1.6;
  color: #666; /* 描述文字颜色 */
  margin-bottom: 20px; /* 底部外边距 */
}

.team-intro {
  margin-top: 20px; /* 顶部外边距 */
  background-color: #fff; /* 团队介绍背景白色 */
  padding: 20px;
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 添加阴影效果 */
}

.team-title {
  font-size: 20px;
  font-weight: bold;
  color: #333; /* 团队标题颜色 */
  margin-bottom: 10px; /* 底部外边距 */
}

.team-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #666; /* 团队描述文字颜色 */
}

@media (max-width: 768px) {
  .mail-list-page-header {
    width: 100%;
    padding: 0 10px;
  }
  .about {
    font-size: 1.5rem;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .about {
    font-size: 1.8rem;
  }
}
</style>
